<template>
    <div class="app-container">
        <a-card class="box-card" :cardOpen="true">
            <div slot="header">
                <span>事件信息</span>
            </div>
            <div slot="header-toolbtn">
                <el-button type="primary" size="mini" icon="el-icon-back" @click="handleReback">返回演练计划列表 </el-button>
            </div>
            <el-form ref="elForm" :model="planInfo" size="medium" label-width="100px">
                <el-row :gutter="15">
                    <el-col :span="24">
                        <el-form-item label="事件名称" prop="event_name">
                            {{ planInfo.eventName }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="6">
                        <el-form-item label="事件类型" prop="event_type">
                            <dict-tag :options="dict.type.usetypecode_dict" :value="planInfo.eventType" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="事件等级" prop="event_level">
                            <dict-tag :options="dict.type.eventlevelcode_dict" :value="planInfo.eventLevel" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="发生地" prop="event_location">
                            {{ planInfo.eventLocaltion }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="发生时间" prop="event_time">
                            {{ planInfo.eventTime }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="24">
                        <el-form-item label="事件简述" prop="content_title">
                            {{ planInfo.contentTitle }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="24">
                        <el-form-item label="影响范围" prop="impact_area">
                            {{ planInfo.impactArea }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="24">
                        <el-form-item label="周围环境" prop="surroundings">
                            {{ planInfo.surroundings }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="24">
                        <el-form-item label="事件原因" prop="event_cause">
                            {{ planInfo.eventCause }}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </a-card>
        <a-card class="box-card" v-if="logs.length > 0" :style="{ marginTop: '15px' }" :cardOpen="true">
            <div slot="header">
                <span>过程回看</span>
                <span class="play-time" v-if="playStatus != 0">当前任务时间:{{ playTimeFormat }}</span>
            </div>
            <div slot="header-toolbtn">
                <template v-if="playStatus == 0">
                    <el-button type="primary" size="mini" icon="el-icon-video-play" @click="handleStartPlayBack">开始回看</el-button>
                </template>
                <template v-if="playStatus == 1">
                    <el-button type="warning" size="mini" icon="el-icon-video-pause" @click="handlePausePlayBack">暂停回看</el-button>
                </template>
                <template v-if="playStatus == 2">
                    <el-button type="primary" size="mini" icon="el-icon-video-play" @click="handleStartPlayBack">继续回看</el-button>
                </template>
            </div>
            <el-row :gutter="20">
                <el-col :span="12"
                    ><div class="feed-container">
                        <div class="feed-list" ref="feedList">
                            <ul>
                                <li v-for="i in playLogs">
                                    <div class="feed-item">[{{ i.createTime }}] {{ i.content }}</div>
                                </li>
                            </ul>
                        </div>
                    </div></el-col
                >
                <el-col :span="12">
                    <div class="feed-container">
                        <div class="feed-list" ref="msgList">
                            <ul>
                                <li v-for="i in playMsgLogs">
                                    <div class="feed-item">
                                        [{{ i.msgTime }}] <span class="msg-sender">{{ i.userName }}：</span> {{ i.msgContent }}
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </a-card>
    </div>
</template>
<script>
import ACard from "@/views/components/a-card/card.vue";
import { getDrillPlanInfo } from "@/api/drill/drill";
import { getDrillPlayBackLogs } from "@/api/drill/log";
import { getAllGroupMsg } from "@/api/chat/im.js";
const moment = require("moment");

export default {
    name: "HandlePlayBack",
    components: { ACard },
    dicts: ["usetypecode_dict", "eventlevelcode_dict", "info_report_channel", "sys_dept_type_dict"],
    props: [],
    data() {
        return {
            planId: 0,
            planInfo: null,
            eventInfo: {},
            playStatus: 0,
            logs: [],
            msgLogs: [],
            timer: null,
            playTime: 0,
            playLogs: [],
            playMsgLogs: [],
        };
    },
    computed: {
        playTimeFormat() {
            return moment(this.playTime * 1000).format("YYYY-MM-DD HH:mm:ss");
        },
    },
    watch: {},
    created() {},
    mounted() {
        this.planId = this.$route.query.planId;
        this.getDrillPlanInfo();
    },
    methods: {
        getDrillPlanInfo() {
            // 获取处置的基本信息
            getDrillPlanInfo(this.planId).then(res => {
                this.planInfo = res.data;
                this.getHandleLogs();
                this.getHandleMessages();
            });
        },
        getHandleLogs() {
            getDrillPlayBackLogs(this.planId).then(res => {
                this.logs = res.data;
                this.playTime = moment(res.data[0].createTime, "YYYY-MM-DD HH:mm:ss").unix();
            });
        },
        getHandleMessages() {
            getAllGroupMsg("drill", this.planId).then(res => {
                this.msgLogs = res.data;
            });
        },
        handleDrillDetail() {
            this.$tab.openPage("事件详情", "/guard/event/detail", { infoId: this.dutyInfo.infoId });
        },
        handleStartPlayBack() {
            this.playStatus = 1;
            this.timer = setInterval(() => {
                this.playTime += 60;
                this.showLog();
            }, 1000);
        },
        showLog() {
            // 显示处置日志
            let index = this.playLogs.length;
            for (var i = index; i < this.logs.length; i++) {
                let time = moment(this.logs[i].createTime, "YYYY-MM-DD HH:mm:ss").unix();
                if (time < this.playTime) {
                    // 显示到列表
                    this.playLogs.push(this.logs[i]);
                }
            }
            this.$nextTick(() => {
                this.$refs.feedList.scrollTop = this.$refs.feedList.scrollHeight;
            });
            // 显示聊天日志
            let mIndex = this.playMsgLogs.length;
            for (var i = mIndex; i < this.msgLogs.length; i++) {
                let time = moment(this.msgLogs[i].msgTime, "YYYY-MM-DD HH:mm:ss").unix();
                if (time < this.playTime) {
                    // 显示到列表
                    this.playMsgLogs.push(this.msgLogs[i]);
                }
            }
            this.$nextTick(() => {
                this.$refs.msgList.scrollTop = this.$refs.msgList.scrollHeight;
            });
            if (this.playLogs.length == this.logs.length && this.playMsgLogs.length == this.msgLogs.length) {
                // 显示完了，停止
                this.handleStopPlayBack();
            }
        },
        handlePausePlayBack() {
            this.playStatus = 2;
            clearInterval(this.timer);
        },
        handleStopPlayBack() {
            this.playStatus = 0;
            clearInterval(this.timer);
        },
        handleReback() {
            // 关闭当前标签页，打开新标签页
            this.$tab.closePage().then(res => {
                this.$tab.openPage("演练计划", "/drill/drillList", {});
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.feed-container {
    background: #0b133c;
    color: white;
    border-radius: 10px;
    padding: 15px;

    .feed-list {
        overflow-y: scroll;
        height: 300px;

        // 设置滚动条宽度
        &::-webkit-scrollbar {
            width: 8px !important;
            height: 8px !important;
            background: rgba(10, 122, 227, 0.01);
        }

        //滚动条的哈滑块
        &::-webkit-scrollbar-thumb {
            background: #2e6190;
            border-radius: 3px;
        }

        .feed-item {
            font-size: 12px;
            line-height: 25px;
            .msg-sender {
                color: var(--el-color-primary);
            }
        }
    }
}

.play-time {
    margin-left: 20px;
    font-size: 12px;
}

ul,
li {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}
</style>
